<template>
  <!-- 客户信息添加 -->
  <el-dialog v-model="outerVisible" class="el-dialog" width="910px" @close="resetForm" :before-close="handleClose">
    <div class="customer-max">
      <h2 style="padding: 10px 288px">{{title}}</h2>
      <el-form :model="Customer">
        <el-row>
          <el-col :span="12" style="margin-top: 3px">
            <div class="customer-1">
              <el-form-item label="客户名称" :rules="[{ required: true, message: '客户名称不能为空',trigger: 'blur'}]" prop="name" style="font-weight: 900">
                <el-input v-model="Customer.name" placeholder="请输入客户名称" style="width: 250px;margin-left: 21px"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>客户所属地</span>
                <el-select v-model="Customer.area" placeholder="请输入客户所属地" style="width: 250px">
                  <el-option v-for="item in area" :label="item.value" :value="item.value">
                    <span style="float: left">{{ item.value }}</span>
                    <span
                        style="float: right; color: var(--el-text-color-secondary);margin-left: 22px">{{ item.label }}</span>
                  </el-option>
                </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>客户经理</span>
              <el-select v-model="Customer.cusManager" placeholder="请输入客户经理" style="width: 250px">
                <el-option v-for="item in cusManager" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>客户级别</span>
              <el-select v-model="Customer.level" placeholder="请输入客户级别" style="width: 250px">
                <el-option v-for="item in level" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>客户信用度</span>
              <el-rate v-model="Customer.xyd" style="width: 250px"></el-rate>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>客户地址</span>
              <el-cascader v-model="Customer.address" :options="address"
                           :props="{checkStrictly:true,emitPath:false}" placeholder="选择地址" style="width: 250px" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>邮编</span>
              <el-input v-model="Customer.postCode" placeholder="请输入邮编" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <el-form-item label="联系电话" :rules="[{ required: true, message: '联系电话不能为空',trigger: 'blur'}]" prop="phone" style="font-weight: 900">
                <el-input v-model="Customer.phone" placeholder="请输入联系电话" style="width: 250px;margin-left: 21px"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>传真</span>
              <el-input v-model="Customer.fax" placeholder="请输入传真" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>网址</span>
              <el-input v-model="Customer.webSite" placeholder="请输入网址" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <el-form-item style="font-weight: 900" label="法人代表" :rules="[{ required: true, message: '法人代表不能为空',trigger: 'blur'}]" prop="fr">
                <el-input v-model="Customer.fr" placeholder="请输入法人代表" style="width: 250px;margin-left: 21px"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>注册资金</span>
              <el-input v-model="Customer.zczj" placeholder="请输入注册资金" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>年营业额</span>
              <el-input v-model="Customer.nyye" placeholder="请输入年营业额" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>开户银行</span>
              <el-select v-model="Customer.khyh" placeholder="请输入开户银行" style="width: 250px">
                <el-option v-for="item in khyh" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>开户账号</span>
              <el-input v-model="Customer.khzh" placeholder="请输入开户账号" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>地税登记号</span>
              <el-input v-model="Customer.dsdjh" placeholder="请输入地税登记号" style="width: 250px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-1">
              <span>国税登记号</span>
              <el-input v-model="Customer.gsdjh" placeholder="请输入国税登记号" style="width: 250px"></el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!--确定取消按钮-->
      <div class="confirm">
        <template v-if="type===0">
          <el-button type="success" style="width: 82px;height: 44px" @click="addCustomer">确定添加</el-button>
        </template>
        <template v-else>
          <el-button type="success" style="width: 82px;height: 44px" @click="updateCustomer">确定修改</el-button>
        </template>
        <el-button type="primary" style="width: 82px;height: 44px" @click="outerVisible = false">取消</el-button>
      </div>
    </div>
  </el-dialog>

  <!--订单查看-->
  <el-dialog v-model="checkCustomer" width="950px" :before-close="handleClose">
    <h3 style="margin-bottom: 20px;margin-left: 360px">客户管理-查看订单信息</h3>
    <div class="checkCustomer-1">
      <div class="checkCustomer-1-1">
        <span>客户名称</span>
        <el-input v-model="Customer.name" style="width: 250px" :disabled="true"></el-input>
      </div>
      <div class="checkCustomer-1-1">
        <span>法人</span>
        <el-input v-model="Customer.fr" style="width: 250px" :disabled="true"></el-input>
      </div>
      <div class="checkCustomer-1-1">
        <span>客户地址</span>
        <el-cascader v-model="Customer.address" :options="address" :props="{checkStrictly:true,emitPath:false}"
                     placeholder="选择地址" style="width: 250px" :disabled="true" />
      </div>
      <div class="checkCustomer-1-1">
        <span>联系电话</span>
        <el-input v-model="Customer.phone" style="width: 250px" :disabled="true"></el-input>
      </div>
    </div>
    <!--客户订单表-->
    <div class="checkCustomer-2">
      <br>
      <el-table :data="customer_order" border style="width: 100%; opacity: 0.7;"
                :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
        <el-table-column fixed label="编号" prop="id" width="80"></el-table-column>
        <el-table-column label="订单编号" prop="orderNo" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="收货地址" prop="address" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="支付状态" prop="state" width="130">
          <template #default="s">
            <template v-if="s.row.state === 1">
              <el-tag type="success">已支付</el-tag>
            </template>
            <template v-else-if="s.row.state === 0">
              <el-tag type="info">未支付</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="下单日期" prop="orderDate" width="130" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createDate" width="130" show-overflow-tooltip></el-table-column>
        <el-table-column label="更新时间" prop="updateDate" width="130" show-overflow-tooltip></el-table-column>
        <!--        <el-table-column fixed="right" label="操作" width="120">-->
        <!--          <template #default="xxx">-->
        <!--            <el-button type="primary" circle @click="">-->
        <!--              <el-icon>-->
        <!--                <edit />-->
        <!--              </el-icon>-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!-- 分页控件 -->
      <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                     :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
  </el-dialog>

</template>

<script>
import {
  address,
  getAddressLabel
} from "../../../../common/city";
import {
  addCustomer,
  updateCustomer,
  getCustomerOrderInfo
} from "../../../../network/marcustomer";
import {
  ElMessage
} from "element-plus";
export default {
  name: "CustomerForm",
  emits: ['refresh-data'],
  data() {
    return {
      getAddressLabel,
      //客户信息添加
      outerVisible: false,
      address: address,
      //订单查看
      checkCustomer: false,
      //客户信息添加标题
      title: null,
      type: 0,
      Customer: {
        name: null, //客户姓名
        area: null, //客户所属地区
        cusManager: null, //客户经理
        level: null, //客户级别
        xyd: null, //客户信用度
        address: null, //客户地址
        postCode: null, //邮编
        phone: null, //联系电话
        fax: null, //传真
        webSite: null, //网址
        fr: null, //法人代表
        zczj: null, //注册资金
        nyye: null, //年营业额
        khyh: null, //开户银行
        khzh: null, //开户账号
        dsdjh: null, //地税登记号
        gsdjh: null, //国税登记号
        lossReason: null, //流失原因
      },
      //客户所属地区
      area: [{
        value: '北京',
        label: 'Beijing',
      },
        {
          value: '上海',
          label: 'Shanghai',
        },
        {
          value: '南京',
          label: 'Nanjing',
        },
        {
          value: '成都',
          label: 'Chengdu',
        },
        {
          value: '深圳',
          label: 'Shenzhen',
        },
        {
          value: '广州',
          label: 'Guangzhou',
        },
      ],
      //客户经理
      cusManager: [{
        value: '张三',
      },
        {
          value: '李四',
        },
        {
          value: '王五',
        },
      ],
      //客户级别
      level: [{
        value: '大客户'
      },
        {
          value: '战略合作伙伴'
        },
        {
          value: '重点开发客户'
        }
      ],
      //开户银行
      khyh: [{
        value: '中国银行',
      },
        {
          value: '工商银行',
        },
        {
          value: '建设银行',
        },
        {
          value: '农业银行',
        },
      ],
      //客户订单表
      customer_order: [],
      no: 1,
      size: 4,
      total: 0,
    }
  },
  methods: {
    //关闭前的回调
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
    },
    //重置表单
    resetForm() {
      console.log('调用')
      Object.assign(this.Customer, this.$options.data.call(this).Customer);
    },
    //客户信息添加
    addCustomer() {
      addCustomer(this.Customer).then(data => {
        if (data.code === 200) {
          ElMessage.success("添加成功！！！");
          this.outerVisible = false;
          this.$emit('refresh-data');
        }
      })
    },
    //客户信息修改
    updateCustomer() {
      updateCustomer(this.Customer).then(data => {
        if (data.code === 200) {
          ElMessage.success("修改成功！！！");
          this.outerVisible = false;
          this.$emit('refresh-data');
        } else {
          ElMessage.error('修改失败！！！');
        }
      })
    },
    //查询所有
    loadData(hint) {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
      }
      //加载表数据
      if (hint) {
        this.loading = true;
      }
      getCustomerOrderInfo(params).then(data => {
        console.log('data:', data)
        this.customer_order = data.list;
        this.total = data.total;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      })
    },
    /**/
    /*分页*/
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    },
    /**/
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
/*客户信息添加*/
.customer-max {
  width: 850px;
  height: 550px;
  border: 0px solid black;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.customer-1 {
  width: 350px;
  height: 50px;
  border: 0px solid black;
  /*margin-top: 15px;*/
  margin-left: 47px;
  text-align: right;
  float: left;
}

.customer-1 span {
  padding: 0 15px;
}

.confirm {
  width: 466px;
  height: 44px;
  border: 0px solid black;
  margin-left: 310px;
  margin-top: 0px;
}

/**/
/*订单查看*/
.checkCustomer-1 {
  width: 900px;
  height: 120px;
  border: 0px solid red;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.checkCustomer-1-1 {
  width: 350px;
  border: 0px solid black;
  margin-top: 15px;
  margin-left: 50px;
  text-align: right;
  float: left;
}

.checkCustomer-1-1 span {
  padding: 0 15px;
}

/*客户订单表*/
.checkCustomer-2 {
  width: 900px;
  /*height: 270px;*/
  border: 1px solid gainsboro;
  margin-top: 30px;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.el-select-dropdown__item {
  width: 100%;
  color: darkgray;
}
</style>
